<template>
  <div>
    <div class="container">
      <el-table
        :data="tableData"
        style="width: 80%"
        stripe
        border
        header-cell-class-name="active-header"
        cell-class-name="table-center">
        <el-table-column prop="level" label="岗位"> </el-table-column>
        <el-table-column prop="classHour" label="年度额定教学工作量"> </el-table-column>
        <el-table-column prop="sciHour" label="年度额定科研工作量"> </el-table-column>
        <el-table-column prop="totalHour" label="年度教学科研工作量"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          level: "二级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "三级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "四级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "五级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "六级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "七级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "八级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "九级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "十级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "十一级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "十二级",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
        {
          level: "见习",
          classHour: 0,
          sciHour: 0,
          totalHour: 0,
        },
      ],
    };
  },
  methods: {
    async getTableData() {
      const res = await this.$api.getSchTea();
      console.log(res);
      this.tableData = res.data.data;
    },
  },
  mounted() {
    this.getTableData();
    console.log("学校教师时间---schTeacherTime");
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 94%;
  height: 700px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;

  /deep/ .el-table__row {
    height: 20px;
  }

  /deep/ .el-table__cell {
    padding: 8px 0;
  }

  /deep/ .active-header {
    color: #333;
    text-align: center;
  }
  /deep/ .table-center {
    text-align: center;
  }
  /deep/ .el-table td,
  /deep/.el-table th {
    border-bottom: 1px solid #333 !important; /* 横向边框颜色 */
    border-right: 1px solid #333 !important; /* 纵向边框颜色 */
  }
}
</style>
